<template>
  <el-container>
    <el-header>XYLive</el-header>
    <el-main>
      <el-row>
        <el-col :span="3"></el-col>
        <el-col :span="18">
          <el-card v-loading="loading">
            <template #header>
              <div class="card-header">
                <span>会议直播演示</span>
              </div>
            </template>
            <el-form ref="formRef" :model="form" :rules="rules" label-width="auto">
              <el-form-item label="直播标题">
                <el-input v-model="form.title" placeholder="请输入直播标题"/>
              </el-form-item>
              <el-form-item label="会议号">
                  <el-input v-model="form.meetingNumber" placeholder="请输入会议号（选填）"/>
              </el-form-item>
              <el-form-item>
                <el-popconfirm title="确认创建?" @confirm="onCreate">
                  <template #reference>
                    <el-button type="primary" :icon="Promotion">创建</el-button>
                  </template>
                </el-popconfirm>
              </el-form-item>
            </el-form>
            <el-divider />
            <p>推流地址：<el-tag type="primary">{{pushUrl}}</el-tag></p>
            <el-divider />
            <p>会议号：<el-tag type="primary">{{meetingNumber}}</el-tag></p>
            <p>直播ID：<el-tag type="primary">{{liveId}}</el-tag></p>
            <p>拉流地址：<el-tag type="primary">{{pullUrl}}</el-tag></p>
            <el-divider />
              <p>直播观看地址：<el-tag type="primary">{{liveViewUrl}}</el-tag></p>
              <el-button type="primary" @click="goToLive" :icon="VideoPlay">观看直播</el-button>
              <el-divider />
            <el-button-group>
              <el-button type="primary" @click="startLive" :icon="VideoPlay">开始直播</el-button>
              <el-button type="danger" @click="stopLive" :icon="VideoPause">暂停直播</el-button>
            </el-button-group>
            <el-divider />
            <div id="dplayer" style="width: 100%"></div>
          </el-card>
        </el-col>
        <el-col :span="3"></el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {createLive} from "@/api/api.js";
import Hls from "hls.js";
import DPlayer from 'dplayer';
import {Promotion, VideoPause, VideoPlay} from "@element-plus/icons-vue";
import {useRouter} from "vue-router";

defineOptions({
  name: "Demo"
});

const formRef = ref(null)

const form = reactive({
    title: "",
    meetingNumber: "",
})

const rules = {
    title: [{ required: true, message: '请输入直播标题', trigger: 'blur' }]
}

const pushUrl = ref("")
const pullUrl = ref("")
const meetingNumber = ref("")
const liveId = ref("")
const password = ref("")
const liveViewUrl = ref("")

const loading = ref(false)

const router = useRouter();

onMounted(() => {

})

let dp = null

const goToLive = () => {
    const {href} = router.resolve({
        path: '/liveDemo',
        query: {
            liveId: liveId.value,
            meetingNumber: meetingNumber.value,
            password: password.value
        }
    })
    window.open(href, '_blank')
}

const startLive = () => {
  dp = new DPlayer({
    container: document.getElementById('dplayer'),
    live: true,
    theme: '#409EFF',
    video: {
      url: pullUrl.value,
      type: 'customHls',
      customType: {
        customHls: function (video, player) {
          const hls = new Hls();
          hls.loadSource(video.src);
          hls.attachMedia(video);
        },
      },
    },
    // pluginOptions: {
    //   hls: {
    //     // hls config
    //   },
    // },
  });
}

const stopLive = () => {
  dp&&dp.pause();
}

const onCreate = () => {
    formRef.value.validate(valid => {
        if (valid) {
            loading.value = true;
            createLive(form).then((res) => {
                loading.value = false;

                pushUrl.value = res.data.pushUrl;
                pullUrl.value = res.data.pullUrls[0].videoM3u8;
                meetingNumber.value = res.data.meetingNumber;
                liveId.value = res.data.liveId;
                password.value = res.data.password;

                let pwd = password.value?password.value:"";
                liveViewUrl.value = window.location.href + "live?liveId="+liveId.value+"&meetingNumber="+meetingNumber.value+"&password="+pwd


                // dp.switchVideo(
                //     {
                //       url: pullUrl.value,
                //       type: 'hls',
                //     }
                // );
            }).catch(() => {
                loading.value = false;
            });
        }
    })
}
</script>

<style scoped>
.el-header {
  display: flex;
  justify-content: center;
  align-items: center
}
</style>